<script setup>
import { artGetChannelsService } from '@/api/artucle'
import { ref } from 'vue'
const channerlList = ref([])
// 请求数据并赋值给channerlList
const getChannelsList = async () => {
  const res = await artGetChannelsService()
  channerlList.value = res.data.data
}
getChannelsList()
// 父传子的类型定义 （在下边用:modelValue接收传过来的值）
defineProps({
  modelValue: {
    type: [Number, String]
  }
})
// 定义了一个名为 update:modeValue 的事件。这个事件通常被用于子组件向父组件传递数据。
const emit = defineEmits(['update:modelValue'])
</script>
<template>
  <!-- 下拉框的渲染数据需要父级绑定才能选中 -->
  <!-- :modelValue="modelValue" 表示父级的v-model传过来的值 -->
  <!-- @update:modeValue 表示上边定义的自定义组件 -->
  <!-- emit('update:modeValue', $event)  中的'update:modeValue' 表示触发'update:modeValue'时间，第二个值为子组件向父组件传递的数据 -->
  <el-select :modelValue="modelValue" @update:modelValue="emit('update:modelValue', $event)">
    <!-- v-for和：key是配合使用的（渲染下拉框数据的） -->
    <!-- label 是下拉的内容 -->
    <!-- value 是传给后台的（让后台判断选的是哪组数据） -->
    <el-option
      v-for="channerl in channerlList"
      :key="channerl.id"
      :label="channerl.cate_name"
      :value="channerl.id"
    />
  </el-select>
</template>
